<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      {{id ? '编辑部门/岗位' : '新增部门/岗位'}}
    </template>
    <el-form :model="form" :rules="rules" ref="refForm" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(workNameInfo, index) in form.jobList"
        :label="'岗位名称' + index"
        :key="workNameInfo.id"
        :prop="'jobList.' + index + '.name'"
        :rules="{
      required: true, message: '岗位名称不能为空', trigger: 'blur'
    }">
        <el-input v-model="workNameInfo.name"></el-input>
        <el-button icon="el-icon-plus" circle v-if="index === 0" @click="addNewWork"></el-button>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-select v-model="form.sort" placeholder="排序">
          <el-option :label="i" :value="i" v-for="i in form.totalSort" :key="i"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {form} from '@/build';
  import {authDepartmentGetByIdApi, authDepartmentSaveApi} from '@/services/api/permission';

  export default {

    name: 'create-department-dialog',

    props:['value','id','rowData'],

    mixins: [form],
    data() {
      return {
        form: {
          jobList: [
            {
              id: undefined,
              name: ''
            }
          ],
          name: undefined,
          remark: undefined,
          totalSort: 10,
        },
        jobList:[],
        rules: {
          name: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' },
          ],
          sort: [
            { required: true, message: '排序不能为空', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      addNewWork() {
        this.form.jobList.push({
          id: undefined,
          name: ''
        });
      }
    },

    watch:{
      jobList(){
        this.form.jobList = this.jobList
      }
    },
    mounted() {
      this.bindSave(authDepartmentSaveApi, 'saveForm', 'form', {
        afterSuccess: () => {
          this.$emit('submit');
        }
      });

      if (!_.isUndefined(this.rowData) && this.rowData.departmentId) {
        const {departmentId} = this.rowData
        this.form  = {...this.form,...this.rowData}
        this.bindGet(authDepartmentGetByIdApi, 'jobList', {
          sendingData: {departmentId},
          format: data=>{
            return data && _.map(data, item=>{
              const {name,menuList,jobId,departmentId} = item
              return {name,menuList,jobId,departmentId}
            })
          }
        });
        this.getAll();
      }
    },
  }
</script>

<style lang="scss" scoped>
  .el-input {
    width: 80%;
  }
</style>
